<template>
  <div>
    <!-- 设置骨架屏以抵消自适应屏幕时的动画 -->
    <el-skeleton :rows="6" animated class="skeleton" v-show="loading">
      <template slot="template">
        <el-skeleton-item variant="image" style="width: 100vw; height: 800px" />
        <div style="padding: 14px">
          <el-skeleton-item variant="p" style="width: 100%" />
          <div
            style="
              display: flex;
              align-items: center;
              justify-items: space-between;
            "
          >
            <el-skeleton-item variant="text" style="margin-right: 16px" />
            <el-skeleton-item variant="text" style="width: 30%" />
          </div>
        </div>
      </template>
    </el-skeleton>
    <div v-show="!loading">
      <HeaderVue />
      <div class="Header-floor"></div>
      <div class="nuxt-content">
        <Nuxt />
      </div>
      <FooterVue />
    </div>
  </div>
</template>

<script>
import FooterVue from "../components/Footer.vue";
import HeaderVue from "../components/Header.vue";

export default {
  components: {
    HeaderVue,
    FooterVue,
  },
  data() {
    return {
      loading: true,
    };
  },
  mounted() {
    //判断移动端和PC端
    if (document.body.clientWidth <= 900) {
      this.$store.commit("Mobile", true);
    } else {
      this.$store.commit("Mobile", false);
    }
    window.onresize = () => {
      return (() => {
        if (document.body.clientWidth < 900) {
          this.$store.commit("Mobile", true);
        } else {
          this.$store.commit("Mobile", false);
        }
        // console.log("移动端", this.$store.state.isMobile);
      })();
    };
    let style =
      document.body.currentStyle ||
      document.defaultView.getComputedStyle(document.body, "");
    console.log(style.fontSize, "浏览器字体fontSize");
    setTimeout(() => {
      this.loading = false;
    }, 500);
  },
};
</script>

<style>
.el-autocomplete-suggestion {
  width: 1000rem !important;
}
.skeleton {
  width: 100vw;
  height: 100vh;
  position: absolute;
  z-index: 999999999999999999999999999999;
  background: #fff;
}
.nuxt-content {
  min-height: 800rem;
}

.container {
  padding-top: 20rem;
}

.Header-floor {
  width: 100%;
  height: 80rem;
}
body::-webkit-scrollbar {
  display: none;
}
.el-tooltip__popper {
  font-size: 16rem;
}
.el-popup-parent--hidden {
  padding-right: 0 !important;
}

@media (max-width: 900px) {
  .Header-floor {
    height: 55px;
  }
  .container {
    padding-top: 0;
  }
}
</style>
